<template>
	<div class="Answer-entry">
		<template v-if="message.questionType === 'SINGLE_CHOICE'">
			<SINGLE_CHOICE :message="message" @submit="event" ref="options"></SINGLE_CHOICE>
		</template>
    <template v-if="message.questionType === 'MULTIPLE_CHOICE_INPUT'">
      <MULTIPLE_CHOICE_INPUT :message="message" @submit="event" ref="options"></MULTIPLE_CHOICE_INPUT>
    </template>
	</div>
</template>
<script>
import SINGLE_CHOICE from './SINGLE_CHOICE.vue';
import MULTIPLE_CHOICE_INPUT from './MULTIPLE_CHOICE_INPUT.vue';

export default {
	name: 'Answer-entry',
	components: {
		SINGLE_CHOICE,
		MULTIPLE_CHOICE_INPUT
	},
	data() {
		return {
			message: null,
		};
	},
	onLoad(query) {
		this.$nextTick(() => {
			this.$refs.options.start(this.message);
		});
	},
	methods: {
		renComponent() {
			if (!this.message) return null;
			if (this.message.questionType === 'SINGLE_CHOICE') {
				return SINGLE_CHOICE;
			}
			if (this.message.questionType === 'MULTIPLE_CHOICE_INPUT') {
				this.$nextTick(() => {
					this.$refs.options.start(this.message);
				});
				return MULTIPLE_CHOICE_INPUT;
			}
		},
		start(data) {
			this.message = data;
			this.$nextTick(() => {
				this.$refs.options.start(this.message);
			});
			console.log('start');
		},
		event(data) {
			this.$emit('submit', data);
		},
	},
};
</script>
<style lang="scss" scoped>
.Answer-entry {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #eee;
	background: #fff;
  padding-bottom: 50px;
}
</style>
